<script setup lang="ts">
import { Message, MessageType } from '../model'

defineProps<{
  messages: readonly Readonly<Message>[]
}>()
</script>

<template>
  <div>
    <slot name="header"></slot>
    <p v-for="msg in messages" v-html="msg.toHTML(`type ${MessageType[msg.type].toLowerCase()}`)" />
  </div>
</template>

<style scoped>
:deep(.type) {
  font-weight: bold;
}

:deep(.error) {
  color: red;
}

:deep(.command) {
  color: forestgreen;
}

:deep(.receive) {
  color: dodgerblue;
}
</style>
